<template>
  <view class="news-list bg-white px-5.25 pt-1 pb-3 box-border min-h-[100vh]">
    <template v-if="news.list.length">
      <view class="listfor" v-for="(item, index) in news.list" :key="index">
        <view class="boxt">
          <view class="box_l">事件社区：</view>
          <view class="box_r">{{ item.communityName }}</view>
        </view>
        <view class="boxt">
          <view class="box_l">事件内容：</view>
          <view class="box_r">{{ item.content }}</view>
        </view>
        <view class="boxt">
          <view class="box_l">图片：</view>
          <view class="box_r imgtu">
            <image
              v-for="(its, i) in item.imglist"
              :key="i"
              :src="its"
              mode="aspectFit"
              @click="funcyl(item.imglist, i)"
            ></image>
          </view>
        </view>
        <view class="boxt">
          <view class="box_l">提交时间：</view>
          <view class="box_r">{{ item.createTime }}</view>
        </view>
        <view style="margin-top: 10rpx">
          <view style="width: 120rpx">
            <up-button
              type="primary"
              size="mini"
              text="删除"
              @click="
                showDel = true;
                delIds = item.id;
              "
            ></up-button>
          </view>
        </view>
      </view>
    </template>
    <up-empty
      v-else
      mode="history"
      text="暂无数据"
      icon="http://cdn.uviewui.com/uview/empty/history.png"
    >
    </up-empty>
    <up-toast ref="uToastRef"></up-toast>

    <up-modal
      :show="showDel"
      title="删除确认"
      content="请问是否确认删除？"
      :closeOnClickOverlay="true"
      contentTextAlign="center"
      showCancelButton
      @confirm="deleteComplaint()"
      @cancel="resetModal"
      @close="resetModal"
    ></up-modal>
  </view>
</template>

<script setup lang="ts">
import newsListItem from "@/components/newsListItem/newsListItem.vue";
import { snapshotgetSnapshotVoPage, snapshotdelete } from "@/api/news/index";
import { imgPrefix } from "@/config/app";
import dayjs from "dayjs";

const uToastRef = <any>ref(null);
const data = reactive({
  news: {
    queryParams: {
      pageNum: 1,
      pageSize: 10,
    },
    current: 0,
    list: <any>[],
    total: 0,
  },
  showDel: false,
  delIds: undefined,
});
const { news, showDel, delIds } = toRefs(data);
const status = ref("loadmore");

onLoad((options) => {
  if (options) {
    uni.setNavigationBarTitle({
      title: options.newsTitle,
    });
    initNews();
  }
});
onReachBottom(() => {
  let allTotal =
    news.value.queryParams.pageNum * news.value.queryParams.pageSize;
  if (allTotal < news.value.total) {
    news.value.queryParams.pageNum++;
    initNews();
  } else {
    uToastRef.value.show({
      type: "info",
      message: "暂无更多数据",
    });
    return;
  }
});
const initNews = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  snapshotgetSnapshotVoPage(news.value.queryParams)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      data.records = data.records ?? [];
      let arr = data.records.map((item) => {
        let arr = item.imgUrl.split(",");
        item.imglist = arr.map((req) => {
          return imgPrefix + req;
        });
        return item;
      });
      news.value.list = [...news.value.list, ...arr];
      news.value.total = data.total;
      uni.stopPullDownRefresh();
    })
    .catch((err: any) => {
      news.value.list = [
        {
          content: "string",
          createBy: "string",
          id: 0,
          imgUrl: "string",
          phonenumber: "string",
          readStatus: 0,
          sid: 0,
          uploadTime: "2025-06-05T14:24:13.549Z",
        },
        {
          content: "string111",
          createBy: "string111",
          id: 0,
          imgUrl: "string111",
          phonenumber: "string111",
          readStatus: 0,
          sid: 0,
          uploadTime: "2025-06-05T14:24:13.549Z",
        },
      ];

      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

const resetModal = () => {
  showDel.value = false;
  delIds.value = undefined;
};

// 查看新闻详情
// const scanNewsDetail = (item: any) => {
//   uni.navigateTo({
//     url: `/subPages/crowd/news/detail?newsId=${item.id}&newsType=${news.value.current}`,
//   });
// };
const funcyl = (e, i) => {
  uni.previewImage({
    current: i, // 当前显示图片索引
    urls: e, // 图片列表
  });
};
const deleteComplaint = () => {
  snapshotdelete(delIds.value)
    .then((res: any) => {
      resetModal();
      uToastRef.value.show({
        type: "success",
        message: "删除成功",
      });
      news.value.list = [];
      news.value.total = 0;
      initNews();
    })
    .catch((err: any) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};

// let funcyl = function (e, i) {
//   // console.log(props.info)
//   // let arr = e.map(e=>{
//   //   return e.url
//   // })
//   // console.log(arr)
//   uni.previewImage({
//     current: i, // 当前显示图片索引
//     urls: e, // 图片列表
//   });
// };
</script>

<style lang="scss" scoped>
.listfor {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #333;
  .boxt {
    margin-bottom: 16rpx;
    display: flex;
    .box_l {
      width: 25%;
      color: #999;
    }
    .box_r {
      width: 75%;
    }
    .imgtu {
      display: flex;
      flex-wrap: wrap;
      /* justify-content: space-between; */
      > image {
        margin-bottom: 12rpx;
        width: 30%;
        height: 120rpx;
        margin-right: 10rpx;
        /* margin-right: 10rpx; */
      }
    }
  }
}
</style>
